<template>
  <div id="checkTrainBox">
    <el-container v-if="isCheck==true" style="position:relative;height:100%">
      <el-header style="height:100px">
        <el-container style="height:100px">
          <el-aside width="350px">
            <el-row style="margin-top:40px;margin-left:20px">
              <el-col :span="6" class="imgCol">
                <i
                  class="iconfont iconxinzeng pointer"
                  style="font-size:25px;margin-right:10px;color:#409EFF"
                  @click="goToAdd"
                ></i>
                <span class="pointer" @click="goToAdd">新增</span>
              </el-col>
              <!-- <el-col :span="6" class="imgCol">
                                <i class="iconfont iconxuanze pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="chooseAction"></i>
                                <span class="pointer" @click="chooseAction">选择</span>
              </el-col>-->
              <el-col :span="6" class="imgCol">
                <i
                  class="el-icon-delete pointer"
                  style="font-size:25px;margin-right:10px;color:#fd034f"
                  @click="deleteResure"
                ></i>
                <span class="pointer" @click="deleteResure">删除</span>
              </el-col>
              <!-- <el-col :span="6" class="imgCol" v-show="actionReady" >
                                <i class="el-icon-circle-close pointer" style="font-size:25px;margin-right:10px;color:#409EFF" @click="cancleAction"></i>
                                <span class="pointer" @click="cancleAction">取消</span>
              </el-col>-->
            </el-row>
          </el-aside>
          <el-main>
            <el-row style="margin-top:40px;">
              <el-col :span="4" :offset="3">
                <el-select
                  v-model="currentStatus"
                  placeholder="请选择"
                  style="width:100px"
                  @change="changeState"
                >
                  <el-option v-for="item in status" :key="item" :label="status[item]" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col :span="16">
                <!-- <el-input v-model="keyWord">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>-->
                <el-input placeholder="请输入内容" v-model="keyWord">
                  <el-button slot="append" icon="el-icon-search" @click="changeKeyWord"></el-button>
                </el-input>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column prop="name" label="培训名" width="180"></el-table-column>
          <el-table-column prop="date" label="发布时间" width="280">
            <template slot-scope="scope">
              <div v-if="scope.row.state==='已下架'">
                <i class="iconfont iconxiajia" style="color: #D0D0D0"></i>
                <span style="color: #D0D0D0;margin-left: 10px">已下架</span>
              </div>
              <div v-else-if="scope.row.state==='待审核'">
                <i class="el-icon-s-check" style="color:#fd034f"></i>
                <span style="color:#fd034f;margin-left: 10px">待审核</span>
              </div>
              <div v-else>
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{scope.row.publishTime }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="报名量">
            <template slot-scope="scope">
              <i class="el-icon-s-custom"></i>
              <span style="margin-left: 10px">{{ scope.row.count}}/{{ scope.row.numberLimit}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="action" label="操作">
            <template slot-scope="scope">
              <el-row>
                <el-col :span="12" v-if="scope.state==='待发布'">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="primary"
                    size="mini"
                    icon="iconfont iconbianji"
                    plain
                  >编辑</el-button>
                </el-col>
                <el-col :span="12" v-else>
                  <el-button
                    @click.native.prevent="goToDetail(scope.row)"
                    type="warning"
                    size="mini"
                    icon="iconfont icontubiao_xiangqing"
                    plain
                  >详情</el-button>
                </el-col>
                <el-col :span="12" v-if="scope.row.state==='已下架'">
                  <el-button disabled type="danger" size="mini" icon="iconfont iconxiajia" plain>下架</el-button>
                </el-col>
                <el-col :span="12" v-else>
                  <el-button
                    @click.native.prevent="deleteRow(scope.row)"
                    type="danger"
                    size="mini"
                    icon="iconfont iconxiajia"
                    plain
                  >下架</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="position:absolute;bottom:0px">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          @current-change="changePages"
        ></el-pagination>
      </el-footer>
    </el-container>
    <el-container v-else>
      <el-header style="height:100px">
        <el-row class="end" style="width:95%;margin-top:25px">
          <el-button type="primary" size="mini" @click="goBack">返回</el-button>
        </el-row>
        <div class="imgCol">
          <div style="width:95%">
            <el-divider></el-divider>
          </div>
        </div>
      </el-header>
      <el-main>
        <div style="margin-left:20px">
          <el-row>
            <i class="iconfont iconclass" style="font-size:25px;color:#409EFF"></i>
            <span style="color:#409EFF">基本信息</span>
          </el-row>
          <div style="margin-left:20px">
            <el-row style="margin-top:10px">
              <i class="el-icon-postcard" style="color:#409EFF"></i>
              <span class="basdInfoWords">培训名称：{{trainInfo.name}}</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="el-icon-sell" style="color:#409EFF"></i>
              <span class="basdInfoWords">发布时间：{{trainInfo.publicTime}}</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="iconfont iconlianxiwomen-copy" style="color:#409EFF"></i>
              <span class="basdInfoWords">联系方式：{{trainInfo.contact}}</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="el-icon-user" style="color:#409EFF"></i>
              <span class="basdInfoWords">培训人数：{{wholeInfo.requirePopulation}}人</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="el-icon-time" style="color:#409EFF"></i>
              <span class="basdInfoWords">培训日期：{{wholeInfo.startTime}} - {{wholeInfo.endTime}}</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="el-icon-odometer" style="color:#409EFF"></i>
              <span class="basdInfoWords">培训具体时间：{{wholeInfo.startClock}} - {{wholeInfo.endClock}}</span>
            </el-row>
            <el-row style="margin-top:10px">
              <i class="el-icon-s-opportunity" style="color:#409EFF"></i>
               <span >培训费用：<span style="color:#fd034f">{{wholeInfo.fee}}¥</span></span>
            </el-row>
          </div>
        </div>
        <div style="margin-left:20px;margin-top:40px">
          <el-row>
            <i class="iconfont iconxianshiqujingjizhibiao" style="font-size:25px;color:#E6A23C"></i>
            <span style="color:#E6A23C">重要指标</span>
          </el-row>
          <div style="margin-left:20px;margin-right:20px">
            <el-table style="margin-top:10px" :data="zhiBiaoData" stripe border>
              <el-table-column prop="clickCount" label="点击量">
                <template slot-scope="scope">
                  <i class="iconfont icondianji" style="color:#E6A23C;font-size:20px"></i>
                  <span style="margin-left: 10px">{{ scope.row.clickCount }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="enrollCount" label="报名量">
                <template slot-scope="scope">
                  <i class="iconfont iconbaoming" style="color:#E6A23C;font-size:20px"></i>
                  <span style="margin-left: 10px">{{ scope.row.enrollCount }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column
                                prop="save"
                                label="收藏量"
                               >
                                <template slot-scope="scope">
                                    <i class="iconfont iconhuabanfuben" style="color:#E6A23C;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.save }}</span>
                                </template>
              </el-table-column>-->
              <el-table-column prop="shareCount" label="分享量">
                <template slot-scope="scope">
                  <i class="iconfont iconfenxiang" style="color:#E6A23C;font-size:20px"></i>
                  <span style="margin-left: 10px">{{ scope.row.shareCount }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="margin-left:20px;margin-top:40px;margin-bottom:20px;">
          <el-row>
            <i class="iconfont icon43leijibaoming" style="font-size:25px;color:#67C23A"></i>
            <span style="color:#67C23A">报名情况</span>
          </el-row>
          <div style="margin-left:20px;margin-right:20px">
            <el-table style="margin-top:10px" :data="enrollData" stripe border>
              <el-table-column prop="username" label="ID"></el-table-column>
              <el-table-column prop="realname" label="姓名"></el-table-column>
              <el-table-column prop="userId" label="身份证号码"></el-table-column>
              <el-table-column prop="contact" label="联系方式">
                <template slot-scope="scope">
                  <i class="iconfont iconlianxiwomen-copy" style="color:#67C23A;font-size:20px"></i>
                  <span style="margin-left: 10px">{{ scope.row.contact }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="报名时间">
                <template slot-scope="scope">
                  <i class="el-icon-time" style="color:#67C23A;font-size:20px"></i>
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div style="margin-bottom:10px;margin-top:10px">
                       
                        <el-pagination
                            background
                            layout="total,prev, pager, next"
                            :total="pageInfo.totall">
                        </el-pagination>
          </div>-->
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCheck: true,
      actionReady: false,
      currentStatus: "全部",
      status: ["全部", "已发布", "待审核", "已下架"],
      tableData: [],
      pageInfo: {
        pageNo: 1,
        pageSize: 7,
        total: 0
      },
      keyWord: "",
      deleteGroup: [],

      trainClassId: "",
      trainInfo: {
        // name:'低压电工',
        // time:'润实有限公司',
        // contact:'173********'
      },
      wholeInfo: {
        trainId: 0,
        startClock: "",
        requirePopulation: 0,
        trainClassNo: 0,
        contact: "",
        fee: 0,
        endClock: "",
        startTime: "",
        endTime: "",
        professionId: 0
      },
      zhiBiaoData: [],
      enrollData: []
    };
  },
  mounted() {
    var body = document.getElementById("checkTrainBox");
    var height = document.documentElement.clientHeight - 120;
    body.style.height = height + "px";
    console.log(height);

    //查看培训概览
    var params = {
      pageNo: 1,
      pageSize: this.pageInfo.pageSize,
      word: "",
      state: ""
    };
    this.getTrainInfo(params);
  },
  methods: {
    chooseAction() {
      this.actionReady = true;
    },
    cancleAction() {
      this.actionReady = false;
    },
    //下架某个培训
    deleteRow(row) {
      var URL = this.IP + "/train/updateTrainClass";
      console.log(URL);
      console.log(row);
      this.$ajax({
        method: "put",
        url: URL,
        params: {
          trainClassId: row.id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
            var state = "";
            if (this.currentStatus == "全部") {
              state = "";
            } else {
              state = this.currentStatus;
            }
            var params = {
              pageNo: this.pageInfo.pageNo,
              pageSize: this.pageInfo.pageSize,
              word: this.keyWord,
              state: state
            };
            this.getTrainInfo(params);
            // setTimeout(()=>{
            //     this.$router.go(0);
            // },3000)
          } else {
            this.$message.error(response.data.msg);
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
   async goToDetail(row) {
      // console.log(row);
      // this.$router.push({
      //     path:'/home/trainDetail',
      //     query:{
      //         id:row.id
      //     }
      // })
      //查看详情
      await this.getBaseInfo(row.id);
      await this.getImportInfo(row.id);
      await this.getEnrollInfo(row.id);
      await this.getTrainAllInfo(row.id);
      this.isCheck = false;
    },
    goToAdd() {
      this.$router.push({
        path: "/home/addTrain"
      });
    },
    //获取培训信息
    getTrainInfo(params) {
      var URL = this.IP + "/train/trainClassGeneral";
      console.log(URL);
      console.log(params);
      this.$ajax({
        method: "get",
        url: URL,
        params: params
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.tableData = response.data.data.info;
            this.pageInfo.total = response.data.data.total;
          } else {
            this.tableData = [];
            this.pageInfo.total = 0;
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //用户翻页
    changePages(pageNo) {
      console.log(pageNo);
      this.pageInfo.pageNo = pageNo;
      var state = "";
      if (this.currentStatus === "全部") {
        state = "";
      } else {
        state = this.currentStatus;
      }
      var params = {
        word: this.keyWord,
        state: state,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getTrainInfo(params);
    },
    //修改状态
    changeState(state) {
      console.log(state);
      var currentStete = "";
      if (state === "全部") {
        currentStete = "";
      } else {
        currentStete = state;
      }
      this.pageInfo.pageNo = 1;
      var params = {
        word: this.keyWord,
        state: currentStete,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getTrainInfo(params);
    },
    //搜索关键字
    changeKeyWord() {
      var state = "";
      if (this.currentStatus === "全部") {
        state = "";
      } else {
        state = this.currentStatus;
      }
      this.pageInfo.pageNo = 1;
      var params = {
        word: this.keyWord,
        state: state,
        pageNo: this.pageInfo.pageNo,
        pageSize: this.pageInfo.pageSize
      };
      this.getTrainInfo(params);
    },
    //确认是否删除
    deleteResure() {
      this.$confirm("此操作将永久删除这些信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          // });
          if (this.deleteGroup.length === 0) {
            this.$message({
              message: "请选择要删除的信息！",
              type: "error"
            });
          } else {
            this.deleteTrain();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量选中
    handleSelectionChange(val) {
      //console.log(val);
      var i = 0;
      this.deleteGroup = [];
      for (i = 0; i < val.length; i++) {
        this.deleteGroup[i] = val[i].id.toString();
      }
      console.log(this.deleteGroup);
    },
    //批量删除培训
    deleteTrain() {
      var URL = this.IP + "/train/deleteTrainClass";
      console.log(URL);
      this.$ajax({
        method: "DELETE",
        url: URL,
        data: this.deleteGroup
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
            //     setTimeout(()=>{
            //         this.$router.go(0);
            //    },2000);
            var state = "";
            if (this.currentStatus == "全部") {
              state = "";
            } else {
              state = this.currentStatus;
            }
            var params = {
              pageNo: this.pageInfo.pageNo,
              pageSize: this.pageInfo.pageSize,
              word: this.keyWord,
              state: state
            };
            this.getTrainInfo(params);
          } else {
            this.$message.error(response.data.msg);
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    goBack() {
      // this.$router.go(-1);
      this.isCheck = true;
    },
    //获取基本信息
    getBaseInfo(id) {
      var URL = this.IP + "/train/trainClassTimeBasicInformation";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.trainInfo = response.data.data;
          } else {
            this.trainInfo = [];
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取之前填写的信息
    getTrainAllInfo(id) {
      var URL = this.IP + "/train/trainTotalInformation";
      console.log(URL);
      console.log(id);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.wholeInfo = response.data.data;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            this.wholeInfo = {};
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取重要指标
    getImportInfo(id) {
      var URL = this.IP + "/train/trainClassTimeIndex";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassTimeId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.zhiBiaoData = [response.data.data];
            console.log(this.zhiBiaoData);
          } else {
            this.zhiBiaoData = [];
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取报名情况
    getEnrollInfo(id) {
      var URL = this.IP + "/train/trainClassCondition";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL,
        params: {
          trainClassId: id
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.enrollData = response.data.data;
            // this.pageInfo;
          } else {
            this.enrollData = [];
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    }
  }
};
</script>
<style>
#checkTrainBox {
  /* height:600px; */
  background-color: #fff;
  margin: 15px;
  border-radius: 5px;
}
.el-header,
.el-main,
.el-footer,
.el-aside {
  padding: 0px;
}
.end {
  display: flex;
  justify-content: flex-end;
}
.pointer {
  cursor: pointer;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>